import React, { useCallback } from 'react';
import { callAPI, useApi } from 'hooklib/async';
import styles from './try_fetch.css';

export default function TryFetch() {
  const cbTestCallAPI = useCallback(() => {
    callAPI('!get /catalog/menu', {
      appCode: 'portal',
    }).then((resp: any) => {
      console.dir(resp);
    });
  }, []);

  const cbTestCallAPI2 = useCallback(() => {
    callAPI('get /oss/es/info', {
      period: 2,
    }).then((resp: any) => {
      console.dir(resp);
    });
  }, []);

  const cbTestCallAPI3 = useCallback(() => {
    callAPI('get /catalog/getMenuDescAlt', {
      orgCode: 100001,
    }).then((resp: any) => {
      console.dir(resp);
    });
  }, []);

  const testSaveGetMenuAlt = useCallback(async () => {
    //  yield call(menuService.saveMenuDescAlt, { orgCode, menuId, menuDesc, menuDescAlt });
    // /saveMenuDescAlt 保存顶级菜单
    const tsSave = await callAPI('post /catalog/saveMenuDescAlt', {
      orgCode: 100001,
      menuId: '101000000',
      menuDesc: '企业应用中心',
      menuDescAlt: '企业应用中心alt',
    });
    const tsGet = callAPI('get /catalog/getMenuDescAlt', {
      orgCode: 100001,
    }).then((resp: any) => {
      console.dir(resp);
    });
  }, []);

  const testSaveGetCatalogAlt = useCallback(async () => {
    //  yield call(menuService.saveMenuDescAlt, { orgCode, menuId, menuDesc, menuDescAlt });
    // /saveMenuDescAlt 保存顶级菜单
    const tsSave = await callAPI('post /catalog/saveCatalogNameAlt', {
      orgCode: 100001,
      menuId: '101000000',
      catalogId: '101100000',
      catalogName: '组织生态',
      catalogNameAlt: '组织生态alt',
    });
    const tsGet = callAPI('get /catalog/getHoverMenuDataAlt', {
      orgCode: 100001,
      menuId: '101000000',
    }).then((resp: any) => {
      console.dir(resp);
    });
  }, []);

  const testSaveGetCatalogAlt2 = useCallback(async () => {
    //  yield call(menuService.saveMenuDescAlt, { orgCode, menuId, menuDesc, menuDescAlt });
    // /saveMenuDescAlt 保存顶级菜单
    const tsSave = await callAPI('post /catalog/saveCatalogNameAlt', {
      orgCode: 100001,
      menuId: '100000000',
      catalogId: '100107000',
      catalogName: '计算',
      catalogNameAlt: '计算alt',
    });
    const tsGet = callAPI('get /catalog/getHoverMenuDataAlt', {
      orgCode: 100001,
      menuId: '100000000',
    }).then((resp: any) => {
      console.dir(resp);
    });
  }, []);

  const testSaveGetProductNameAlt = useCallback(async () => {
    //  yield call(menuService.saveMenuDescAlt, { orgCode, menuId, menuDesc, menuDescAlt });
    // /saveMenuDescAlt 保存顶级菜单
    const tsSave = await callAPI('post /catalog/saveProductNameAlt', {
      orgCode: 100001,
      productCode: 'instance',
      productName: '主机',
      productNameAlt: '主机alt',
    });
    const tsGet = callAPI('get /catalog/getProductNameAlt', {
      orgCode: 100001,
      productCode: 'instance',
    }).then((resp: any) => {
      console.dir(resp);
    });
  }, []);

  const testGetHoverMenu = useCallback(async () => {
    const tsSave = await callAPI(
      'get /catalog/menu/100000000/catalog/product',
      {
        orgCode: 100001,
        menuId: '101000000',
        catalogId: '101100000',
      },
    );
  }, []);

  const testGetAllProductNameAlt = useCallback(async () => {
    const tsSave = await callAPI('get /catalog/getAllProductNameAlt', {
      orgCode: 100001,
    });
    // 返回 [{productCode, productNameAlt}] 清单
  }, []);

  const ts = useApi([],
    () => ['get /catalog/menu', {
      appCode: 'portal',
    }]);

  return (
    <div className={styles.normal}>
      <h1>Page try_fetch</h1>
      <button className={styles.block} onClick={cbTestCallAPI}>
        !get /catalog/menu (!开头无需认证)
      </button>
      <button className={styles.block} onClick={cbTestCallAPI2}>
        get /oss/es/info
      </button>
      <button className={styles.block} onClick={cbTestCallAPI3}>
        get /catalog/getMenuDescAlt
      </button>
      <button className={styles.block} onClick={testSaveGetMenuAlt}>
        test menu save/get
      </button>
      <button className={styles.block} onClick={testSaveGetCatalogAlt}>
        testSaveGetCatalogAlt
      </button>
      <button className={styles.block} onClick={testSaveGetCatalogAlt2}>
        testSaveGetCatalogAlt2
      </button>
      <button className={styles.block} onClick={testSaveGetProductNameAlt}>
        testSaveGetProductNameAlt
      </button>
      <button className={styles.block} onClick={testGetHoverMenu}>
        testGetHoverMenu
      </button>
      <button className={styles.block} onClick={testGetAllProductNameAlt}>
        testGetAllProductNameAlt
      </button>
    </div>
  );
}
